<template>
  <!-- 数据清洗/数据清洗转换/工作流管理 -->
  <div class="work_wrapper">
    <div class="work_wrap">
      <!-- 左侧tree树结构 -->
      <div class="work_list_warp">
        <div class="work_list_serach">
          <el-input
            v-model="workTreeSerachVal"
            placeholder="查询"
            class="work_tree_serach"
            suffix-icon="el-icon-search"
          ></el-input>
        </div>
        <div class="work_tree">
          <el-tree
            class="filter-tree"
            :data="workTreeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterTreeNode"
            ref="workTree"
          >
          </el-tree>
        </div>
      </div>
      <div class="work_main_wrap">
        <div class="work_main_serach">
          <div class="work_main_search_wrap">
            <el-input
              v-model="tableSearchVal"
              class="tableSearchVal"
              placeholder="编码、名称"
            ></el-input>
            <el-button type="primary" @click="tableSearchFn">查询</el-button>
          </div>
          <div class="work_main_addBtn">
            <el-button type="primary" @click="addPushG6Fn">新增</el-button>
          </div>
        </div>
        <div class="work_main_table">
          <el-table
            :data="workTableData"
            style="width: 100%"
            v-show="workTableData.length"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="tableNumberIndex"
            >
            </el-table-column>
            <el-table-column prop="liuchengName" label="流程名称">
            </el-table-column>
            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column prop="runLog" label="启动方式"> </el-table-column>
            <el-table-column prop="user" label="创建人"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="editTime" label="修改时间">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="text" @click="isWatchItemContentFn(scope.row)"
                  >详情</el-button
                >
                <el-button type="text" @click="isEditItemContentFn(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" @click="isDeleteItemFn(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div v-show="!workTableData.length">暂无内容</div>
        </div>
      </div>
    </div>
    <div class="liucheng_g6_wrap" v-if="isShowG6DialogFlag">
      <g6-main
        @isShowG6DialogFn="isShowG6DialogFn"
        ref="g6Ref"
        :g6Data="currentG6Data"
        :currentG6Type="currentG6Type"
      />
    </div>
  </div>
</template>

<script>
const AAA = [
  {
    liuchengName: "流程001",
    status: "已提交",
    runLog: "手动启动",
    user: "张飒",
    createTime: "2016-15-51",
    editTime: "2022-11-55",
    g6Obj: {
      nodes: [
        {
          id: "流程001的开始",
          label: "源",
          img: require("@/assets/gzlgl/start.png"),
        },
        {
          id: "流程001的结束",
          label: "筛选器",
          img: require("@/assets/gzlgl/001.png"),
        },
      ],
      edges: [
        {
          source: "流程001的开始",
          target: "流程001的结束",
        },
      ],
    },
  },
  {
    liuchengName: "流程002",
    status: "已提交",
    runLog: "手动启动",
    user: "张飒",
    createTime: "2016-15-51",
    editTime: "2022-11-55",
    g6Obj: {
      nodes: [
        {
          id: "流程002的开始",
          label: "源",
          img: require("@/assets/gzlgl/start.png"),
        },
        {
          id: "流程002的中转",
          label: "汇总",
          img: require("@/assets/gzlgl/002.png"),
        },
        {
          id: "流程002的结束",
          label: "IF",
          img: require("@/assets/gzlgl/005.png"),
        },
      ],
      edges: [
        {
          source: "流程002的开始",
          target: "流程002的中转",
        },
        {
          source: "流程002的中转",
          target: "流程002的结束",
        },
      ],
    },
  },
];
import g6Main from "./g6Main.vue";
export default {
  data() {
    return {
      workTreeSerachVal: "", //左侧树结构的搜索
      workTreeData: [
        {
          id: 1,
          label: "流程列表",
          children: [
            {
              id: 2,
              label: "一级A",
              children: [
                {
                  id: 4,
                  label: "一级A-1",
                },
                {
                  id: 5,
                  label: "一级A-2",
                },
              ],
            },
            {
              id: 3,
              label: "一级B",
              children: [
                {
                  id: 6,
                  label: "一级B-1",
                },
                {
                  id: 7,
                  label: "一级B-2",
                },
              ],
            },
          ],
        },
      ], //左侧树结构的数据
      defaultProps: {
        children: "children",
        label: "label",
      }, //树结构的字段名配置
      tableSearchVal: "", //右侧搜索val
      workTableData: [
        {
          liuchengName: "流程001",
          status: "已提交",
          runLog: "手动启动",
          user: "张飒",
          createTime: "2016-15-51",
          editTime: "2022-11-55",
          g6Obj: {
            nodes: [
              {
                id: "流程001的开始",
                label: "源",
                img: require("@/assets/gzlgl/start.png"),
              },
              {
                id: "流程001的结束",
                label: "筛选器",
                img: require("@/assets/gzlgl/001.png"),
              },
            ],
            edges: [
              {
                source: "流程001的开始",
                target: "流程001的结束",
              },
            ],
          },
        },
        {
          liuchengName: "流程002",
          status: "已提交",
          runLog: "手动启动",
          user: "张飒",
          createTime: "2016-15-51",
          editTime: "2022-11-55",
          g6Obj: {
            nodes: [
              {
                id: "流程002的开始",
                label: "源",
                img: require("@/assets/gzlgl/start.png"),
              },
              {
                id: "流程002的中转",
                label: "汇总",
                img: require("@/assets/gzlgl/002.png"),
              },
              {
                id: "流程002的结束",
                label: "IF",
                img: require("@/assets/gzlgl/005.png"),
              },
            ],
            edges: [
              {
                source: "流程002的开始",
                target: "流程002的中转",
              },
              {
                source: "流程002的中转",
                target: "流程002的结束",
              },
            ],
          },
        },
      ], //右侧table数据
      tableNumberIndex: 1, //序号的起始值
      isShowG6DialogFlag: false, //是否显示g6弹窗
      currentG6Data: {}, //选中的g6结构
      currentG6Type: null, //查看还是编辑watch or edit
    };
  },
  components: { g6Main },
  watch: {
    workTreeSerachVal(val) {
      this.$refs.workTree.filter(val);
    },
  },
  methods: {
    // 树结构的查询
    filterTreeNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 查看g6详情
    isWatchItemContentFn(item) {
      this.currentG6Data = item.g6Obj;
      this.currentG6Type = "watch";
      this.isShowG6DialogFn(true);
    },
    // 修改g6图
    isEditItemContentFn(item) {
      this.currentG6Data = item.g6Obj;
      this.currentG6Type = "edit";
      this.isShowG6DialogFn(true);
    },
    // 新增
    addPushG6Fn() {
      this.currentG6Data = {};
      this.currentG6Type = "edit";
      this.isShowG6DialogFn(true);
    },
    // 删除该条数据
    isDeleteItemFn(item) {
      this.$me;
      let name = item.liuchengName;
      this.workTableData = this.workTableData.filter((items) => {
        return items.liuchengName != name;
      });
      this.$message({
        message: "删除成功~",
        type: "success",
      });
    },
    // 表单筛选
    tableSearchFn() {
      if (this.tableSearchVal) {
        this.workTableData = AAA.filter((item) => {
          return item.liuchengName.indexOf(this.tableSearchVal) >= 0;
        });
      } else {
        this.workTableData = AAA;
      }
    },
    // 是否展示isShowG6DialogFlag
    isShowG6DialogFn(flag) {
      this.isShowG6DialogFlag = flag;
    },
  },
};
</script>

<style lang="less" scoped>
.work_wrapper {
  display: flex;
  height: 1000px;
  position: relative;
  .work_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    .work_list_warp {
      width: 300px;
      flex: 0 0 300px;
      border-right: 1px solid #ccc;
      .work_list_serach {
        width: 100%;
        display: flex;
        align-items: center;
        .work_tree_serach {
        }
      }
      .work_tree {
        box-sizing: border-box;
        padding: 20px;
      }
    }
    .work_main_wrap {
      flex: 1 1 100%;
      box-sizing: border-box;
      padding: 20px 30px;
      position: relative;
      .work_main_serach {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .work_main_search_wrap {
          display: flex;
          align-items: center;
          .tableSearchVal {
          }
        }
      }
      .work_main_table {
        margin-top: 20px;
      }
      .liucheng_g6_wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f00;
      }
    }
  }
  .liucheng_g6_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
  }
}
</style>
